<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            background-color: #ccc;
        }
        .bigBox{
            width: 300px;
            height: 350px;
            background-color: #fff;
            border-radius: 10px;
            text-align: center;
            float: left;
            margin-left: 20px;
        }
        .topBox{
            width: 300px;
            height: 100px;
            background-color: deepskyblue;
            border-radius: 10px 10px 0px 0px;
        }
        .imgBox{
            width: 100px;
            height: 100px;
            background-color: #fff;
            border-radius: 50%;
            margin-left: 100px;
            margin-top: -50px;
            background-image: url(../04-选择器的进阶+背景相关属性/img/fan.png);
            background-size: 100px;
            background-repeat: no-repeat;
        }
        h2,p{
            background-color: #fff;
            padding: 10px 0px;
        }
    </style>
</head>
<body>
<div class="bigBox">
    <div class="topBox">

    </div>
    <div class="imgBox">
        
    </div>
    <h2>张三</h2>
    <p style="color: #3498db">前端开发工程师</p>
    <p style="color: grey">
        5年前端开发经验，精通HTML5、CSS3和JavaScript，熟悉Vue和React框架，热爱创造美观且用户友好的界面。
    </p>
</div>
<div class="bigBox">
    <div class="topBox">

    </div>
    <div class="imgBox">

    </div>
    <h2>张三</h2>
    <p style="color: #3498db">前端开发工程师</p>
    <p style="color: grey">
        5年前端开发经验，精通HTML5、CSS3和JavaScript，熟悉Vue和React框架，热爱创造美观且用户友好的界面。
    </p>
</div>
</body>
</html>